<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 440px;
				height: 310px;
				/*border: 1px solid gray;*/
				
				/* 子绝父相*/
				position: relative;
			}
			.box a{
				display: block;
				width: 440px;
				height: 310px;
			}
			.box img{
				/* 百分比，是相对于父元素*/
				width: 440px;
				height: 310px;
			}
			.box p{
				width: 440px;
				height: 50px;
				line-height: 50px;
				position: absolute;
				left: 0;
				bottom: 0;
				font-size: 24px;
				color: white;
				
				/* a: 透明度*/
				background: rgba(1,1,1,0.6);
			}
			.box i{
				display: inline-block;
				width: 30px;
				height: 50px;
				background: red;
				color: whiet;
				text-align: center;
			}
		</style>
	</head>
	
	<body>
		<div class="box">
			<a href="#">
				<img src="img/08-img.png" />
				<p> <i>1</i> 微信支付，告别收银台，告别... </p>
			</a>
		</div>
	</body>
</html>
